<template>
	<Echart id="leftCenter" :options="options" class="left_center_inner" v-if="pageflag" ref="charts" />
	<Reacquire v-else @onclick="getData" style="line-height:200px">
		重新获取
	</Reacquire>
</template>

<script>
export default {
	data() {
		return {
			options: {},
			regionCode: 'china',
			countUserNumData: {
				ben: 0,
				shuo: 0,
				bo: 0,
				totalNum: 0
			},
			pageflag: true,
			timer: null
		};
	},
	created() {
		this.getData('china')
	},
	mounted() {
	},
	beforeDestroy() {
		this.clearData()

	},
	methods: {
		clearData() {
			if (this.timer) {
				clearInterval(this.timer)
				this.timer = null
			}
		},
		getData(regionCode) {
			this.pageflag = true;
			this.regionCode = regionCode;
			if (regionCode == "china" || regionCode == "100000") {
				this.$axios.get("/api/result/education").then((res) => {
					// Print only once
					if (!this.timer) {
						console.log("学历分布", res);
					}
					if (res.code == 0) {
						// Assign the new data structure
						this.countUserNumData = {
							ben: res.data['0'], // 本科生
							shuo: res.data['1'], // 硕士生
							bo: res.data['2'],   // 博士生
							totalNum: res.data['0'] + res.data['1'] + res.data['2']
						};
						this.$nextTick(() => {
							this.init();
						});
					} else {
						this.pageflag = false;
						this.$Message.warning(res.message);
					}
				})
			}
			else {
				this.$axios.get(`/api/result/education/${regionCode}`).then((res) => {
					// Print only once
					if (!this.timer) {
						console.log("学历分布", res);
					}
					if (res.code == 0) {
						// Assign the new data structure
						this.countUserNumData = {
							ben: res.data['0'], // 本科生
							shuo: res.data['1'], // 硕士生
							bo: res.data['2'],   // 博士生
							totalNum: res.data['0'] + res.data['1'] + res.data['2']
						};
						this.$nextTick(() => {
							this.init();
						});
					} else {
						this.pageflag = false;
						this.$Message.warning(res.message);
					}
				})
			}

		},
		//轮询
		switper() {
			if (this.timer) {
				return;
			}
			let looper = () => {
				this.getData(this.regionCode);
			};
			this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime);

			let myChart = this.$refs.charts.chart;
			myChart.on('mouseover', () => {
				this.clearData();
			});
			myChart.on('mouseout', () => {
				this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime);
			});
		},
		init() {
			let total = this.countUserNumData.totalNum;
			let colors = ["#477f58", "#0ba85f", "#d05e2f"]; // 博、本、硕
			let piedata = {
				name: "新生学历分布",
				type: "pie",
				radius: ["42%", "65%"],
				avoidLabelOverlap: false,
				itemStyle: {
					borderRadius: 4,
					borderColor: "rgba(0,0,0,0)",
					borderWidth: 2,
				},
				color: colors,
				data: [
					{
						value: this.countUserNumData.bo, // 博士生
						name: "博士生",
						label: {
							shadowColor: colors[0],
						},
					},
					{
						value: this.countUserNumData.ben, // 本科生
						name: "本科生",
						label: {
							shadowColor: colors[2],
						},
					},
					{
						value: this.countUserNumData.shuo, // 硕士生
						name: "硕士生",
						label: {
							shadowColor: colors[1],
						},
					},
				],
			};
			this.options = {
				title: {
					text: ["{value|" + total + "}", "{name|总数}"].join("\n"),
					top: "center",
					left: "center",
					textStyle: {
						rich: {
							value: {
								color: "#005b30",
								fontSize: 24,
								fontWeight: "bold",
								lineHeight: 28,
							},
							name: {
								color: "#005b30",
								fontSize: 18,
								lineHeight: 24,
							},
						},
					},
				},
				tooltip: {
					trigger: "item",
					backgroundColor: "#f8faf7",
					borderColor: "#009a44",
borderWidth: 1.5,
					textStyle: {
						color: "#233a18",
						fontSize: 20,
						fontFamily: "Microsoft YaHei"
					},
				},
				legend: {
					show: false,
					top: "5%",
					left: "center",
				},
				series: [
					{
						...piedata,
						tooltip: { show: true },
						label: {
							formatter: "{b|{b}}\n{per|{d}%}\n{c|{c}人}",
							rich: {
								b: {
									color: "#0ba85f",
									fontSize: 16,
									lineHeight: 26,
								},
								c: {
									color: "#005b30",
									fontSize: 16,
								},
								per: {
									color: "#a23e0a",
									fontSize: 20,
								},
							},
						},
						labelLine: {
							length: 12, // 第一段线 长度
							length2: 20, // 第二段线 长度
							show: true,
						},
						emphasis: {
							show: true,
						},
					},
					{
						...piedata,
						tooltip: { show: true },
						itemStyle: {},
						label: {
							backgroundColor: "inherit",
							height: 0,
							width: 0,
							lineHeight: 0,
							borderRadius: 2.5,
							shadowBlur: 1,
							shadowColor: "auto",
							padding: [2.5, -2.5, 2.5, -2.5],
						},
						labelLine: {
							length: 12, // 第一段线 长度
							length2: 20, // 第二段线 长度
							show: false,
						},
					},
				],
			};
		},
	},
};
</script>
<style lang='scss' scoped></style>